<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <my_cpn :cmovies="movies" :cmessage="message"></my_cpn>
</div>
<template id="my_cpn">
  <div>
    <ul>
      <li v-for="movie in cmovies">{{movie}}</li>
    </ul>
    <p>{{cmovies}}</p>
    <p>{{cmessage}}</p>
  </div>
</template>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
  const my_cpn = {
    template: '#my_cpn',
    /*
    传递数组
    传递对象 控制传递类的限制
    传递对象，提供默认值
     */
    props: {
      cmessage: {
        type: String,
        default: 'full',
        require: false
      },
      cmovies: {
        type: Array,
        default() {
          return []
        }
      }
    },
    data() {
      return {}
    }
  }
  const app = new Vue({
    el: "#app",
    data: {
      message: "Hello zk I am Vue !",
      movies: ['海贼王', '海王', '海尔兄弟']
    },
    components: {
      my_cpn
    }
  })
</script>
</body>
</html>
